<template>
  <CommBG>
    <div class="reg_phone_wrapper pos_absolute flex_header_main">
      <div class="reg_phone_title flex_header">
        <div class="reg_phone_header">迪丽热巴</div>
        <div class="reg_phone_dis">报考信息填写</div>
      </div>
      <div class="reg_phone_main flex_main">
        <div class="reg_title">登记照（用于证书制作）</div>
        <div class="add_phone"> 添加照片 </div>
        <div v-for="(item, index) in disList" :key="index">
          <div class="dis_label">{{ item.label }}</div>
        </div>
        <div class="submit_btn">
          <div class="submit_info btn">提交</div>
          <div class="submit_info_input btn">填写考试时间</div>
        </div>
      </div>
    </div>
  </CommBG>
</template>

<script lang="ts" setup name="user_orderPage">
  import CommBG from '@/components/bg/CommBG.vue'
  import { reactive, ref } from 'vue'
  import useUserStore from '@/store/modules/user'
  import { useRouter } from 'vue-router'
  import sysMsg from '@/utils/sysMsg'

  const router = useRouter()
  const userStore = useUserStore()
  const ruleForm = ref<any>(null)
  const disList = ref([
    {
      label: '1、照片为1寸、白底、免冠登记照',
    },
    {
      label: '2、照片大小40KB 到1000KB',
    },
    {
      label: '3、照片要求格式为.jpg',
    },
    {
      label: '4、照片尺寸为:295*413px',
    },
    {
      label: '5、考生报名照片保证无美颜、无修图、无滤镜',
    },
  ])
  const onSubmit = () => {
    console.log(router)
    sysMsg.successMsg('点击登录')
    ruleForm.value.validate().then(async ({ valid, errors }: any) => {
      if (valid) {
        await userStore.user_orderCloud({ userName: '', passWord: '' })
      } else {
        console.log('error submit!!', errors)
      }
    })
  }
</script>

<style scoped lang="less">
  .reg_phone_wrapper {
    .reg_phone_title {
      font-weight: 500;
      margin: 110px 90px 44px 90px;
      .reg_phone_header {
        font-size: 44px;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 22px;
      }
      .reg_phone_dis {
        font-size: 52px;
        color: #ffffff;
      }
    }
    .add_phone {
      background: #e5e5e5;
      width: 310px;
      height: 412px;
      margin: 62px auto 57px auto;
    }
    .reg_phone_main {
      background: #ffffff;
      border-radius: 90px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding: 66px 52px;
      .reg_title {
        font-weight: bold;
        font-size: 34px;
        color: #4548f4;
      }
      .dis_label {
        font-size: 28px;
        text-align: center;
        color: rgba(0, 0, 0, 0.65);
      }
    }
    .submit_btn {
      text-align: center;
      margin-top: 20%;
      .btn {
        border-radius: 10px;
        padding: 13px 86px;
        font-size: 28px;
        display: inline-block;
        font-weight: 600;
        border: 4px solid #4548f4;
      }
      .submit_info {
        background: #ffffff;
        color: #4548f4;
      }
      .submit_info_input {
        margin-left: 3%;
        color: #ffffff;
        background: #4548f4;
      }
    }
  }
</style>
